<template>
  <div class="deliverySetting">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      tooltip-effect="dark">
      <el-table-column type="expand">
        <template slot-scope="props" accordion>
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="date" label="日期" sortable/>
      <el-table-column label="商品 ID" prop="id"/>
      <el-table-column label="商品名称" prop="name" width="150"/>
      <el-table-column label="描述" prop="desc" width="220"/>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.names }}</p>
            <p>住址: {{ scope.row.address2 }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.names }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        prop="tag"
        label="标签"
        width="100"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, tableData)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      multipleSelection: [],
      tableData: [{
        names: '张三',
        address2: '上海市普陀区金沙江路 1519 弄',
        date: '2016-05-02',
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        tag: '家'
      }, {
        names: '李四',
        address2: '上海市普陀区金沙江路 1517 弄',
        date: '2016-05-04',
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        tag: '家'
      }, {
        names: '王五',
        address2: '上海市普陀区金沙江路 1518 弄',
        date: '2016-05-01',
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        tag: '公司'
      }, {
        names: '赵六',
        address2: '上海市普陀区金沙江路 1516 弄',
        date: '2016-05-03',
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        tag: '家'
      }]
    }
  },
  methods: {
    filterTag(value, row) {
      return row.tag === value
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.deliverySetting {
  background-color: #fff;
  padding: 30px 20px 20px 20px;
  height: 80vh;
}
.demo-table-expand {
  font-size: 0;
}
.deliverySetting >>> .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  float: left;
  display: flex;
}
</style>
